<template>
	<u-popup v-model="show" mode="bottom" height="100%">
		<view class="update-account-wrap">
			<view class="header-wrap">
				<text class="title">
					修改账号
				</text>
				<text>
					首次登录我们建议您修改自己的账号以及密码，避免您下次登录遗忘账号。
				</text>
			</view>
			<u-form :model="form" ref="uForm">
				<u-form-item label="账号">
					<u-input v-model="form.account"/>
				</u-form-item>
				<u-form-item label="性别">
					<u-input type="password" v-model="form.password" password-icon/>
				</u-form-item>
			</u-form>
			<u-button class="u-margin-top-10 u-margin-bottom-10" @click="handleNext()">跳过</u-button>
			<u-button class="u-margin-top-10" type="primary">提交</u-button>
		</view>
	</u-popup>
</template>

<script>
import UFormItem from "../uview-ui/components/u-form-item/u-form-item.vue";
import UButton from "../uview-ui/components/u-button/u-button.vue";

export default {
	components: {UButton, UFormItem},
	data() {
		return {
			show: true,
			form: {
				account: '',
				password: ''
			},
			rules: {
				account: [
					{
						required: true,
						message: '请输入账号',
						trigger: 'blur,change'
					}
				],
			}
		};
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		showPopup(user) {
			this.show = true
			if (user) {
				this.form.account = user.username
			}
		},
		handleSubmitUpdate() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					this.$u.api.updateAccount().then(res => {
						this.handleNext()
					})
				} else {
					console.log('验证失败');
				}
			});
		},
		handleNext(){
			this.$emit('next')
		}
	}
};


</script>
<style lang="scss" scoped>

.update-account-wrap {
	padding: 77rpx;
	display: flex;
	align-content: center;
	justify-content: center;
	height: 77vh;
	flex-direction: column;
}

.header-wrap {
	text-align: center;
}

.title {
	display: block;
	font-size: 56rpx;
	text-align: center;
}
</style>
